<template>
  <div class="feeatr">
    <!--  查询表单-->
    <el-form ref="form" :model="form" :rules="rule"  label-width="auto"  :inline="true" size="mini">
            <el-form-item prop="cprDepId" label="区域中心：">
              <el-popover
                placement="bottom"
                 width="200"
                trigger="click"
               >
               <el-tree :data="area" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              <el-input suffix-icon="el-icon-arrow-down" slot="reference" v-model="form.dptName" clearable @change="getval"></el-input>
            </el-popover>
            </el-form-item>
            <el-form-item prop="cprDesc" label="项目属性描述：">
            <el-input v-model="form.cprDesc" clearable></el-input>
            </el-form-item>
           <el-form-item prop="" label="">
              <el-button type="primary" size="mini" @click="search">查 询</el-button>
          </el-form-item>
    </el-form>
    <div class="flexBlock">
     <div class="left">
    <!-- 费目属性列表 -->
      <!-- <div class="atrTable"> -->
      <div class="name">费目属性列表</div>
      <!-- 按钮组 -->
      <div class="btn-area" ref="detlArea">
      <el-button plain size="mini" type="success" @click="addFeeatr">新增</el-button>
      <el-button plain size="mini" type="primary" @click="editFeeatr">编辑</el-button>
      <el-button plain size="mini" type="danger" @click="delFeeatr">删除</el-button>
      <!-- <el-button plain size="mini" type="primary" @click="refresh">刷新</el-button> -->
      </div>
      <div ref="inner" class="inner">
      <el-table :data="tableData" border
          :height="maxHeight"
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          @row-click="rowClick"
          @row-dblclick="dbrowClick"
          >
        <el-table-column :index="indexMethod" type="index"  align="center" label=" " width="50"></el-table-column>
        <el-table-column  align="left" prop="cprDesc" label="费目属性描述" show-overflow-tooltip width="" sortable></el-table-column>
        <el-table-column  align="left" prop="cprInsertuser" label="输入员工" show-overflow-tooltip width="120" sortable></el-table-column>
        <el-table-column  align="center" prop="cprInsertdt" label="输入时间" show-overflow-tooltip width="130" sortable></el-table-column>
        <el-table-column  align="left" prop="cprLstupduser" label="最后修改员工" show-overflow-tooltip width="150" sortable></el-table-column>
        <el-table-column  align="center" prop="cprLstupddt" label="最后修改时间" show-overflow-tooltip width="130" sortable></el-table-column>
        <el-table-column  align="center" prop="cprIsvalid" label="有效标志" show-overflow-tooltip width="120px" sortable>
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.cprIsvalid" true-label="Y" false-label="N" disabled></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <!-- 分页 -->
    <div class="block">
      <el-pagination
      ref="pagination"
      small
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total">
    </el-pagination>
    </div>
    </div>
    <div class="feeright">
        <div class="name">费目属性内容</div>
        <div class="bottom" ref="bottom">
           <el-table :data="contextTable" border
              height="690"
              :header-cell-style="{ textAlign: 'center' }"
              width="100%"
              highlight-current-row>
            <el-table-column :index="indexMethod" type="index" align="center" label=" " width="50"></el-table-column>
            <el-table-column prop="cpvCode" align="center" label="字段名" width=""></el-table-column>
            <el-table-column prop="cpvValue" align="center" label="值" width=""></el-table-column>
          </el-table>
      </div>
    </div>
    </div>
    <el-dialog
    v-el-drag-dialog
    :title="name"
    :visible.sync="openDialog"
     width="50%">
      <div class="attr">
      <div class="name">费目属性</div>
     <el-form ref="dialogForm" :model="dialogForm" :rules="ruleTop"  label-width="auto"  :inline="true" size="mini">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="cprDesc" label="费目属性描述：">
            <el-input v-model="dialogForm.cprDesc" clearable :disabled="edit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="cprIsvalid" label="有效标志：">
            <el-radio-group v-model="dialogForm.cprIsvalid" @change="ISVALID" :disabled="view">
              <el-radio   label="Y">是</el-radio>
              <el-radio  label="N">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    </div>
    <div class="item">
      <div class="name">费目属性项/值</div>
      <el-form ref="itemForm" :model="itemForm" :rules="rules"  label-width="auto"  :inline="true" size="mini">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="CPR_LOADPORT" label="起始港/站：">
              <el-select v-model="itemForm.CPR_LOADPORT" style="width:95%"  clearable :disabled="view">
               <el-option v-for="(item,index) in port" :key="index" :label="item.potCname" :value="item.potCname"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="CPR_DESTINATIONPORT" label="目的港/站：" >
              <el-select v-model="itemForm.CPR_DESTINATIONPORT" style="width:95%" clearable :disabled="view">
                <el-option v-for="(item,index) in port" :key="index" :label="item.potCname" :value="item.potCname"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="CPR_SIZETYPE" label="尺寸：">
              <el-select v-model="itemForm.CPR_SIZETYPE" style="width:95%"  clearable :disabled="view">
                <el-option v-for="(item,index) in sizeArr" :key="index" :value="item.cszCsizenm" :label="item.cszCsizenm">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="CPR_SPL_CODE" label="持箱人：">
             <el-select v-model="itemForm.CPR_SPL_CODE" style="width:95%" clearable :disabled="view">
                <el-option v-for="item in ownerArr" :value="item.splCode" :label="item.splCode" :key="item.splCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer" >
    <el-button type="primary" @click="save" v-if="!view" size="mini">保存</el-button>
    <el-button  @click="close" size="mini">关闭</el-button>
  </div>

    </el-dialog>
  </div>
</template>
<script>
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
// import isAuth from '@/mixins/buttonAuth'
// import pagination from '@/mixins/pagination'
import {getPortsInfo,GetSysChargePropertyList,GetContatinerSizes,getShips,AddSysDSLYCharge,GetChargePropertycontent,getChildrenDptList,
  UpdateChargeProperty,DeleteChargePropertyModel} from '@/request/api'
export default {
  name:'router.feeatr',
  mixins: [resizeMixin, paginationMixin],
  components:{
    // dialogOpen
  },
  data(){
    return{
      form:{cprDepId:'',cprDesc:'',dptName:''}, //查询表单数据
      dialogForm:{},//对话框表单数据
      rule:{
        cprDesc:[]
      },
      area:[],//区域中心
      defaultProps:{
        children: 'sysDepartmentChildren',
        label: 'dptName'
      },
      tableData:[],
      contextTable:[],
      maxHeight:-1,
      openDialog:false,
      name:'',
      selectData:{},
      currentData:{},//双击选中数据
      view:false,
      // rowdata:{},
      edit:false,
      itemForm:{
        CPR_LOADPORT:'',
        CPR_DESTINATIONPORT:'',
        CPR_SIZETYPE:'',
        CPR_SPL_CODE:'',
        cpvCprId:''
      },//解析对象
      dataBase:{}, //基础数据

      //弹出框
      port:[],//港站
      sizeArr:[],//尺寸下拉
      ownerArr:[],//持箱人
      portsObj:{},
      sizeObj:{},
      ownerObj:{},
      ruleTop:{
        cprDesc:[{required:true,message:'请输入项目属性描述',trigger:'blur'}],
        cprIsvalid:[{required:true,message:'请选择有效标志',trigger:'blur'}]
      },
      rules:{
        CPR_LOADPORT:[{required:true,message:'请选择起始港/站',trigger:'blur'}],
        CPR_DESTINATIONPORT:[{required:true,message:'请选择目的港/站',trigger:'blur'}],
        CPR_SIZETYPE:[{required:true,message:'请选择尺寸',trigger:'blur'}],
        CPR_SPL_CODE:[{required:true,message:'请选择持箱人',trigger:'blur'}],
      }
    }
  },
  created(){
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.resize()
    getChildrenDptList().then(res=>{
      this.area=res.data.FTKJWLHYPT
    })
    this.getList(this.Pagination.currentPage,this.Pagination.pageSize,this.updatePaginationTotal)

    getPortsInfo().then(res=>{  //港口
      this.port=res.data
      this.port.forEach(item=>{
        this.portsObj[item['potCd']]=item['potCname']
      })
    })

    GetContatinerSizes().then(res=>{ //箱尺寸


      this.sizeArr=res.data.FTKJWLHYPT
      this.sizeArr.forEach(item=>{
        this.sizeObj[item['cszCsizecd']]=item['cszCsizenm']
      })
    })
    //持箱人
    getShips().then(res=>{

      this.ownerArr=res.data.FTKJWLHYPT
      this.ownerArr.forEach(item=>{
        this.ownerObj[item['splCode']]=item['splName']
      })
    })

  },
  computed:{
    getDesc(){
      var CPR_SIZETYPE =this.itemForm.CPR_SIZETYPE
      var CPR_LOADPORT=this.itemForm.CPR_LOADPORT
      var CPR_SPL_CODE=this.itemForm.CPR_SPL_CODE
      var CPR_DESTINATIONPORT=this.itemForm.CPR_DESTINATIONPORT
      return `${this.judgy(CPR_SIZETYPE)}${this.judgy(CPR_LOADPORT)}----${this.judgy(CPR_DESTINATIONPORT)}(${this.judgy(CPR_SPL_CODE)})`
    }
  },
  watch:{
    itemForm:{
      handler(){
        this.dialogForm['cprDesc']=this.getDesc
      },
      deep:true
    },
    form:{
      handler(){
        if(this.form.dptName==''){
          this.form.cprDepId=''
        }
      },
      deep:true
    }
  },
  methods:{
    //区域中心
    handleNodeClick(data) {
      // console.log(data)
      this.form.cprDepId=data.dptId
      this.form.dptName=data.dptName
    },
    //查看费目属性内容
    getContent(row){
      // console.log(11111)
      GetChargePropertycontent({cpvCprId:row.cprId}).then(res=>{
        if(res.success==='1'){
          this.contextTable=res.data.FTKJWLHYPT
        }
      })
    },
    //判断有无
    judgy(a,i){
      if(a){
        if(i){
          return a+i
        }else{
          return a
        }
      }
      return ''
    },
    //组合字符串
    parserFields(){
      let obj=this.itemForm
      var arr=[]
      var cpvDepId=this.$store.state.user.DPTID_DX_H
      var cpvFltId=this.$store.state.user.FLT_UUID_DX_H
      var cpvCprId=this.dialogForm.cprId||''
      var item=new Object()
      obj['CPR_COMNAME']='操作子系统'
      for(let key in obj){
        item={
          cpvCode:key,
          cpvValue:obj[key],
          cpvDepId,
          cpvFltId,
          cpvCprId
        }
        arr.push(item)
      }

      return arr
    },
    //双击查看详情
    dbrowClick(row){
      this.contextTable=[]
      this.getContent(row)
      this.contextTable.forEach(item=>{
        this.itemForm[item['cpvCode']]=item['cpvValue']
      })
      this.edit=true
      this.view=true
      this.name='查看费目属性'
      this.openDialog=true
      this.dialogForm=Object.assign({},row)
    },
    search(){
      // this.getList(this.Pagination.currentPage,this.Pagination.pageSize,this.updatePaginationTotal)
      this.refreshList()
    },
    //查询列表
    getList(currentPage, pageSize, updateTotal) {
      GetSysChargePropertyList({
        cprDepId:this.form.cprDepId,
        cprDesc:this.form.cprDesc,
        PageIndexs: currentPage.toString(),
        PageSizes: pageSize.toString()
      }).then(response => {
        this.tableData = response.data.FTKJWLHYPT
        this.contextTable=[]
        // this.$message({
        //   type:'success',
        //   message:'刷新成功',
        //   showClose:true
        // })
        updateTotal(Number(response.data.total.FTKJWLHYPT))
      })
    },
    close(){
      this.openDialog=false
      this.selectData={}
      this.contextTable=[]
      // this.rowdata={}
      setTimeout(() => {
        this.refreshList()
      }, 300)
    },
    //点击选中行事件
    rowClick(row){
      this.contextTable=[]
      this.getContent(row)
      this.selectData=Object.assign({},row)
    },
    // 新增费用属性
    addFeeatr(){
      this.openDialog=true
      this.edit=false
      this.view=false
      this.name='新增费目属性'
      this.dialogForm={
        cprDesc:'',
        cprIsvalid:'Y',
      }
      this.itemForm={
        CPR_LOADPORT:'',
        CPR_DESTINATIONPORT:'',
        CPR_SIZETYPE:'',
        CPR_SPL_CODE:''
      }
    },
    // 编辑费用属性
    editFeeatr(){
      if(Object.keys(this.selectData).length==0){
        this.$alert('请选择需要编辑的数据?','提示',{
          confirmButtonText: '确定',
        })
      }else{
        this.openDialog=true
        this.name='编辑费目属性'
        this.edit=true
        this.view=false
        this.contextTable.forEach(item=>{
          this.itemForm[item['cpvCode']]=item['cpvValue']
        })
        this.dialogForm=Object.assign({},this.selectData)

      }
    },
    //保存 新增或编辑
    save(){
      this.$refs.dialogForm.validate((valid)=>{
        if(valid){
          this.$refs.itemForm.validate(valid=>{
            if(valid){
              if(this.edit){ //编辑
                this.dialogForm.sysTmsChargePropertyValuesList=this.parserFields()
                UpdateChargeProperty(this.dialogForm).then(res=>{
                  if(res.success==='1'){
                    this.$message.success({
                      message: '编辑数据成功！',
                      showClose: true
                    })
                    this.close()
                  }
                })
              }else{  //新增
                this.dialogForm.sysTmsChargePropertyValuesList=[]
                this.dialogForm.sysTmsChargePropertyValuesList=this.parserFields()

                AddSysDSLYCharge(this.dialogForm).then(res=>{
                  // console.log(res)
                  if(res.success==='1'){

                    this.$message.success({
                      message: '新增数据成功！',
                      showClose: true
                    })

                    this.close()
                  }
                })

              }
            }
          })
        }

      })

    },
    // 删除费用属性
    delFeeatr(){
      if(Object.keys(this.selectData).length===0){
        this.$alert('请选择需要删除的数据?','提示',{
          confirmButtonText: '确定',
          // cancelButtonText: '取消',
          // type: 'warning'
        })
        return
      }
      var cprId=this.selectData.cprId
      this.$confirm('您确认要删除选定的数据?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // type: 'warning'
      }).then(()=>{
        DeleteChargePropertyModel(cprId).then(res=>{

          if(res.success==='1'){
            this.$message({
              type:'success',
              message:'删除成功',
              showClose:true
            })
            this.selectData={}
            this.refreshList()
          }
        })
      }).catch(()=>{
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // });
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.feeatr{
padding:15px;
 height:100%;
 display:flex;
 flex-direction:column;
 .attr{
   padding: 10px ;
   border:1px solid rgb(29, 158, 233);
   border-radius:5px;
   position:relative;

   .name{
     position:absolute;
     top:-18%;
     background:#fff;

   }
 }
 .item{
   margin-top:20px;
   padding:10px;
   border:1px solid rgb(29, 158, 233);
   border-radius:5px;

   position:relative;
    .name{
     position:absolute;
     top:-10%;
     background:#fff;

   }
 }
}
// .dialog-footer{
//   text-align:right;
// }
.flexBlock{
flex:1;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  .feeright{
    // flex:1;
    // width:50px;
    width:30%;
    display:inline-flex;
    flex-direction: column;
    .name{
      font-size:16px;
      line-height:20px;
      padding:0px 5px 50px;
    }
    .bottom{
      // flex:1;
      height:100%;
    }
  }
  .left{
    // flex:2;
    width:70%;
    padding-right:12px;
    height:100%;
    // .atrTable{
      //  height:100%;
      //  width:100%;
    display:inline-flex;
    flex-direction:column;
      .name{
        font-size:16px;
        line-height:20px;
      }
      .btn-area{
        padding:12px 0;
      }
      .inner{
        flex:1;
      }
    // }
  }

}
</style>
